<template>
  <view
    class="all-box"
    :style="{ height: popHeight + 'vh' }"
    @touchmove="handleTouchmove($event, item)"
    @touchstart="handleTouchstart"
  >
    <image
      class="popupClose"
      @click="close"
      src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/closeAiDsp.png"
    />
    <view class="pop-top">
      <view class="pop-info-title" v-if="popTitle">
        {{ popTitle }}
      </view>
    </view>
    <view class="info-box">
      <!-- <view class="margin-box"> -->
      <view class="list-tab-box">
        <view
          class="list-tab"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabClick(index)"
        >
          <view class="tab-name" :class="{ active: index == tabIndex }">
            {{ item.name }}
          </view>
          <view
            class="tab-border"
            :class="{ active: index == tabIndex }"
          ></view>
        </view>
      </view>
      <scroll-view
        style="flex: 1; overflow: auto; height: 100%"
        scroll-y
        :scrollIntoView="intoView"
      >
        <view class="notice-content" id="intoView1">
          <view class="notice-title">
            <img
              class="scroll-icon"
              src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/724icon3.png"
            />
            预订规则</view
          >
          <view class="cancel" v-if="instructionsData.cancellationTypeValue">
            {{ instructionsData.cancellationTypeValue }}
          </view>
          <view
            class="use-date"
            v-if="
              cancellation && cancellation.cancellationItemDTOList.length > 0
            "
          >
            <view
              style="padding: 10rpx 0"
              v-for="(item, index) in cancellation.cancellationItemDTOList"
              :key="index"
            >
              {{ item.cancellationTime }}
            </view>
          </view>
          <view class="explain-box">
            <view v-if="restriction && restriction.length > 0">
              <view
                class="explain-info"
                v-for="(item, index) in restriction"
                :key="index"
              >
                <view class="explain-tag">{{ item.title }}</view>
                <view class="explain-text">{{ item.text }}</view>
              </view>
            </view>

            <view class="explain-info" v-if="buyTimeBeforeDTO">
              <view class="explain-tag">{{ buyTimeBeforeDTO.value }}</view>
            </view>
          </view>
          <view class="sale-date" v-if="instructionsData.salesValidityPeriod">
            可售时间{{ instructionsData.salesValidityPeriod }}
          </view>
        </view>

        <view
          class="notice-content active"
          id="intoView2"
          v-if="instructionsForUse && instructionsForUse.length > 0"
        >
          <view class="notice-title">
            <img
              class="scroll-icon"
              src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/724icon1.png"
            />
            使用说明
          </view>
          <view class="notice-txt">
            <view
              class="int-flex-box"
              v-for="(item, index) in instructionsForUse"
              :key="index"
            >
              <view class="int-flex-box-title" v-if="item.firstLevelTitle"
                >【{{ item.firstLevelTitle }}】
              </view>
              <view
                class="int-flex-box-content"
                v-for="(cItem, cIndex) in item.content"
                :key="cIndex"
              >
                <view class="sItem-box">
                  <text class="sItem-1">{{ cItem.title }}</text>
                  <text class="sItem-2">{{ cItem.text }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="notice-content active"
          id="intoView3"
          v-if="instructionsData.appContent.length > 0"
        >
          <view class="notice-title">
            <img
              class="scroll-icon"
              src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/724icon2.png"
            />
            商品详情
          </view>
          <view class="notice-txt">
            <view
              v-for="(item, index) in instructionsData.appContent"
              :key="'content' + index"
              style="font-size: 0"
            >
              <rich-text :nodes="item"></rich-text>
            </view>
          </view>
        </view>
      </scroll-view>
      <movable-area class="movable-po">
        <movable-view x="600" y="600" :out-of-bounds="true" class="po-top-r" direction="all">
            <!-- <button  open-type="contact" ></button> -->
            <img :src="chatAIImg" class="po-button" 
              :data-spmCntSuffix="'.buyQA'"
              :data-custom="1"
              :data-spm="{'pos': '管家咨询'}"  @click="aiClick">
        </movable-view>
      </movable-area>
      <view class="buy-btn" v-if="!showBuy">
        <view class="view-btn" @click="buyClick">立即预订</view>
        <view :style="{ height: safeBottom - 14 + 'px' }"></view>
      </view>
      <!-- </view> -->
    </view>
  </view>
</template>

<script>
  const globalData = uni.getStorageSync("globalData");
export default {
  props: {
    instructionsData: {
      type: Object,
    },
    popHeight: {
      type: Number,
      default: 85,
    },
    paramsData: {
      type: Object,
      default: {},
    },
  },
  components: {},
  computed: {
    cancellation: {
      get() {
        let data = this.instructionsData?.cancellation;
        return data;
      },
    },
    instructionsForUse: {
      get() {
        let data = this.instructionsData?.instructionsForUseDTOS;
        return data;
      },
    },
    restriction: {
      get() {
        let data = this.instructionsData?.restriction
          ? JSON.parse(this.instructionsData?.restriction)
          : "";
        return data;
      },
    },
    buyTimeBeforeDTO: {
      get() {
        let data = this.instructionsData?.buyTimeBeforeDTO;
        return data;
      },
    },
    popTitle: {
      get() {
        let title = this.instructionsData?.productName;
        return title;
      },
    },
    tabList: {
      get() {
        let arr = [];
        let instructionsForUseDTOS =
          this.instructionsData?.instructionsForUseDTOS.length > 0;
        let cancellation = this.instructionsData?.cancellation;
        let appContent = this.instructionsData?.appContent.length > 0;
        if (cancellation) {
          arr.push({
            name: "预订规则",
          });
        }
        if (instructionsForUseDTOS) {
          arr.push({
            name: "使用说明",
          });
        }
        if (appContent) {
          arr.push({
            name: "商品详情",
          });
        }
        return arr;
      },
    },
    showBuy() {
      let obj = this.paramsData
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          return false;
        }
      }
      return true;
    },
  },
  data() {
    return {
      safeBottom: globalData.safeBottom || 0,
      tabIndex: 0,
      intoView: "",
      isClosed: false,
      chatAIImg: uni.getStorageSync('chatAIImg') || 'https://cdn1.visiotrip.com/h5AndMini/2024-0516/chatAi-person.png',
      optionsData: ''
    };
  },
  onLoad() {},
  methods: {
    handleTouchmove(event) {
      if (this.isClosed === true) return;
      let currentX = event.changedTouches[0].pageX;
      let tx = currentX - this.lastX;
      if (tx > 10) {
        // this.close();
      }
    },
    handleTouchstart(event) {
      //滑动开始
      this.lastX = event.changedTouches[0].pageX;
    },
    close() {
      this.isClosed = true;
      this.tabIndex = 0;
      this.intoView = `intoView1`;
      this.$emit("closePop");
      this.isClosed = false;
    },
    tabClick(index) {
      this.tabIndex = index;
      this.intoView = `intoView${index + 1}`;
      console.log(this.intoView);
    },
    buyClick() {
      let data = this.paramsData;
      this.$emit("buyFun", data);
    },
    setData(data){
      this.optionsData = data
    },
    aiClick(){
      if (!this.$isLogin()) {
        return;
      }
      uni.setStorageSync('aiObj', {
        fixedSceneCode: 52,
        productId: this.paramsData.stdId,
        supplierProductId: this.paramsData.supplierProductId,
        productType: this.instructionsData.productType,
        sourceType:'SUPPLIER_PRODUCT',
        poiId: this.optionsData.poiId,
      })
      uni.navigateTo({
        url:'/ai/pages/index'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.all-box {
  border-radius: 40rpx 40rpx 0 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  .popupClose {
    position: absolute;
    right: 42rpx;
    top: 20rpx;
    width: 48rpx;
    height: 48rpx;
  }
}
.pop-top {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1rpx solid #dddddd;
  border-radius: 40rpx 40rpx 0 0;

  .pop-title {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 32rpx;
    color: #ffffff;
    width: 100%;
    bottom: 8px;

    .close {
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      left: 28rpx;
      bottom: -10rpx;
    }
  }

  .pop-info-title {
    padding: 70rpx 0 40rpx 0;
    font-size: 36rpx;
    color: $sl-color-black;
    font-weight: 700;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
    overflow: hidden;
  }
}

.info-box {
  width: 100%;
  border-radius: 30rpx 30rpx 0 0;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 80%;
  //   .margin-box {
  //     margin: 0 auto;
  //     padding-bottom: 30rpx;
  //     display: flex;
  //     flex-direction: column;
  //   }
}

.notice-content {
  margin: 24rpx;
}
.notice-content.active {
  padding-bottom: 30rpx;
  border: none;
}
.list-tab-box {
  display: flex;
  align-items: center;
  height: 100rpx;
  justify-content: flex-start;
  padding: 0 24rpx 14rpx 24rpx;
  background: #ffffff;

  .list-tab {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    height: 65rpx;
    margin: 32rpx 80rpx 0 0;

    .tab-name {
      color: $sl-color-grey;
      font-size: 32rpx;
    }

    .tab-name.active {
      font-size: 36rpx;
      color: $sl-color-black;
      font-weight: 600;
    }

    .tab-border {
      width: 53rpx;
      height: 7rpx;
      border-radius: 4rpx;
      background: #fff;
      border-radius: 4rpx;
    }

    .tab-border.active {
      background: linear-gradient(90deg, #fec901 0%, #ff4c00 100%);
    }
  }
}

.cancel {
  width: 702rpx;
  height: 65rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: $sl-color-grey;
  line-height: 65rpx;
  background: linear-gradient(135deg, #FFFBF7 0%, #FEF6EC 100%);
  margin: 20rpx auto 26rpx auto;
  border-radius: 0 0 0 40rpx;
  padding: 0 0 0 40rpx;
}

.use-date {
  font-size: 28rpx;
  color: $sl-color-grey;
  padding-bottom: 24rpx;
}

.explain-box {
  // min-height: 219rpx;
  width: 100%;

  .explain-info {
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
    flex-wrap: wrap;

    .explain-tag {
      height: 47rpx;
      padding: 0 9rpx;
      background: $sl-bg-color-grey;
      color: $sl-color-light-blue;
      font-size: 24rpx;
      line-height: 47rpx;
    }

    .explain-text {
      font-size: 28rpx;
      color: $sl-color-grey;
      padding: 10rpx;
    }
  }
}

.notice-title {
  color: $sl-color-dark-grey;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-bottom: 16rpx;
}
.scroll-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.notice-txt {
  font-weight: 400;
  font-size: 26rpx;
  color: #404040;
}

.int-flex-box {
  .int-flex-box-title {
    color: $sl-color-grey;
    font-size: 28rpx;
    padding: 30rpx 0 0 0;
    font-weight: 600;
  }

  .int-flex-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: $sl-color-grey;
    padding-top: 10rpx;
    .sItem-box {
      display: flex;
      //   flex-direction: column;
      .sItem-1 {
        font-size: 28rpx;
        color: $sl-color-grey;
        margin-right: 20rpx;
        width: 120rpx;
      }
      .sItem-2 {
        font-size: 28rpx;
        color: $sl-color-grey;
        flex: 1;
      }
    }
  }
}

.label-box {
  width: 100%;
  min-height: 47rpx;
  border: 1rpx solid #979797;
}

.table {
  margin-top: 19rpx;
  border: 1px solid #e5e5e5;
}

.table .tr:not(:last-child) {
  border-bottom: 1rpx solid #e5e5e5;
}

.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.bg-g {
  background: #f6f7f9;
  font-family: PingFang SC;
  font-weight: 500;
}

.th {
  width: 70%;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  color: #404040;
  font-size: 26rpx;
  flex-direction: column;

  view {
    padding: 5rpx 0;
    border-bottom: 1rpx solid #e5e5e5;
  }

  view:last-child {
    border: none;
  }
}

.th-3 {
  width: 30%;
}

.tr .th:last-child {
  border-left: 1rpx solid #e5e5e5;
}

.scroll-box {
  height: 950rpx;
}

.sale-date {
  font-size: 28rpx;
  color: $sl-color-grey;
  padding: 10rpx 0;
}
.buy-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 160rpx;
  background: #ffffff;
  .view-btn {
    width: 710rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
    background: $sl-color-light-blue;
    margin: 18rpx auto 18rpx;
    border-radius: 60rpx;
  }
}
.movable-po {
    position: absolute;
    // z-index: 9999;
    top: 20%;
    width: 1rpx;
    height: 600rpx;
}
.po-top-r {
  overflow: hidden;
	position: fixed;
	top: 40%;
	left:555rpx;
	z-index: 99;
	width: 180rpx;
	height: 180rpx;
	.po-button {
    width: 180rpx;
    height: 180rpx;
    padding: 0;
    border: none;
	}
}
</style>
